<template>
    <el-select v-model="state.selected"
               filterable
               clearable
               :placeholder="props.placeholder"
               @change="proxy.$emit('update:modelValue', state.selected)"
               @clear="proxy.$emit('clear')"
    >
        <el-option
                v-for="(v, i) in state.data"
                :key="i"
                :value="v[props.value]"
                :label="v[props.text]"
        />
    </el-select>
</template>

<script lang="ts" setup>
    import request from "/@/utils/request";
    import {ref, reactive, defineProps, onMounted, getCurrentInstance, watch} from "vue";

    const {proxy}: any = getCurrentInstance();
    const props = defineProps({
        modelValue: String,
        url: {
            type: String,
            default: "",
        },
        query:{
            type: Object,
            default: {},
        },
        type: {
            type: String,
            default: "default",
        },
        value: {
            type: String,
            default: "value",
        },
        text: {
            type: String,
            default: "text",
        },
        method: {
            type: String,
            default: "get",
        },
        query: {
            type: Object,
            default: {},
        },
        data: {
            type: Array,
            default: {},
        },
        multiple: {
            type: Boolean,
            default: false,
        },
        placeholder: {
            type: String,
            default: "请选择",
        },
        change: {
            type: Function,
            default: () => {
            },
        },
        success: {
            type: Function,
            default: () => {
            },
        },
    });

    const state = reactive({
        data: [],
        selected: ""

    });

    const _init = () => {
        _requestData();
    };

    const _requestData = async () => {

        if (!proxy.$wigem.isEmpty(props.url)) {
            let res: any = await request({
                url: props.url,
                method: props.method,
                params:props.query
            });

            if (res.success) {
                state.data = res.data;
                props.success(state.data);
            }
        }
    };
    onMounted(() => {
        _init();
    });
    /*    watch(
            () => props.modelValue,
            () => {
                console.log(props)
                proxy.$emit('change', props.modelValue)
            }
        )*/
</script>
